<template>
	<view class="box-detail">
		<view class="item-line">
			<view class="item-top-text">销售情况</view>
		</view>
		<!-- 销售情况start -->
		<view class="box-detail-content" v-if="!showList1.length">
			<view class="box-detail-content-item">
				<view class="row-title">序号</view>
				<view class="row-content">1</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">月份</view>
				<view class="row-content">无</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">当月销售收入（万元）</view>
				<view class="row-content">无</view>
			</view>
		<!-- 	<view class="box-detail-content-item">
				<view class="row-title">累积销售收入（万元）</view>
				<view class="row-content">无</view>
			</view> -->
		</view>
		<view class="box-detail-content" v-for="item,index in showList1" v-if='item.leixing!==3' :key="index">
			<view class="box-detail-content-item">
				<view class="row-title">序号</view>
				<view class="row-content">{{index+1}}</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">月份</view>
				<uni-datetime-picker class="form-picker" type="date" :value="item.MONTH" start="2000-2-31" end="3050-12-30" @change="dateChange1($event,index)"></uni-datetime-picker>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">当月销售收入（万元）</view>
				<input class="uni-input form-input " v-model="item.MONTH_SALE" name="input" placeholder="请填写当月销售收入"/>
			</view>
<!-- 			<view class="box-detail-content-item">
				<view class="row-title">累积销售收入（万元）</view>
				<input class="uni-input form-input " v-model="item.TOTAL_SALE" name="input" placeholder="请填写累积销售收入"/>
			</view> -->
			<view class="delete-item" @click="deleteItem1(index)"></view>
		</view>
		<view class="add-box-detail-content border-wid" @click="addItem1"></view>
		<!-- 销售情况end -->
		
		
		
		<view class="item-line">
			<view class="item-top-text">营业收入</view>
		</view>
		<!-- 营业收入start -->
		<view class="box-detail-content" v-if="!showList2.length">
			<view class="box-detail-content-item">
				<view class="row-title">序号</view>
				<view class="row-content">1</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">月份</view>
				<view class="row-content">无</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">当月营业收入（万元）</view>
				<view class="row-content">无</view>
			</view>
		<!-- 	<view class="box-detail-content-item">
				<view class="row-title">累计营业收入（万元）</view>
				<view class="row-content">无</view>
			</view> -->
		</view>
		<view class="box-detail-content" v-for="item,index in showList2" v-if='item.leixing!==3' :key="index">
			<view class="box-detail-content-item">
				<view class="row-title">序号</view>
				<view class="row-content">{{index+1}}</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">月份</view>
				<uni-datetime-picker class="form-picker" type="date" :value="item.MONTH" start="2000-2-31" end="3050-12-30" @change="dateChange2($event,index)"></uni-datetime-picker>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">当月营业收入（万元）</view>
				<input class="uni-input form-input " v-model="item.MONTH_INCOME" name="input" placeholder="请填写当月营业收入"/>
			</view>
			<!-- <view class="box-detail-content-item">
				<view class="row-title">累计营业收入（万元）</view>
				<input class="uni-input form-input " v-model="item.TOTAL_INCOME" name="input" placeholder="请填写累计营业收入"/>
			</view> -->
			<view class="delete-item" @click="deleteItem2(index)"></view>
		</view>
		<view class="add-box-detail-content border-wid" @click="addItem2"></view>
		<!-- 营业收入end -->
		
		
		
		<view class="item-line">
			<view class="item-top-text">税收收入</view>
		</view>
		<!-- 税收收入start -->
		<view class="box-detail-content" v-if="!showList3.length">
			<view class="box-detail-content-item">
				<view class="row-title">序号</view>
				<view class="row-content">1</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">月份</view>
				<view class="row-content">无</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">当月税收收入（万元）</view>
				<view class="row-content">无</view>
			</view>
			<!-- <view class="box-detail-content-item">
				<view class="row-title">累计税收收入（万元）</view>
				<view class="row-content">无</view>
			</view> -->
		</view>
		<view class="box-detail-content" v-for="item,index in showList3" v-if='item.leixing!==3' :key="index">
			<view class="box-detail-content-item">
				<view class="row-title">序号</view>
				<view class="row-content">{{index+1}}</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">月份</view>
				<uni-datetime-picker class="form-picker" type="date" :value="item.MONTH" start="2000-2-31" end="3050-12-30" @change="dateChange3($event,index)"></uni-datetime-picker>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">当月税收收入（万元）</view>
				<input class="uni-input form-input " v-model="item.MONTH_INCOME" name="input" placeholder="请填写当月税收收入"/>
			</view>
			<!-- <view class="box-detail-content-item">
				<view class="row-title">累计税收收入（万元）</view>
				<input class="uni-input form-input " v-model="item.TOTAL_INCOME" name="input" placeholder="请填写累计税收收入"/>
			</view> -->
			<view class="delete-item" @click="deleteItem3(index)"></view>
		</view>
		<view class="add-box-detail-content border-wid" @click="addItem3"></view>
		<!-- 税收收入end -->
		
		
		<view class="item-line">
			<view class="item-top-text">服务</view>
		</view>
		<!-- 服务start -->
		<view class="box-detail-content" v-if="!showList4.length">
			<view class="box-detail-content-item">
				<view class="row-title">序号</view>
				<view class="row-content">1</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">服务类别</view>
				<view class="row-content">无</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">月份</view>
				<view class="row-content">无</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">服务需求</view>
				<view class="row-content">无</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">完成时间</view>
				<view class="row-content">无</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">完成内容</view>
				<view class="row-content">无</view>
			</view>
		</view>
		<view class="box-detail-content" v-for="item,index in showList4" v-if='item.leixing!==3' :key="index">
			<view class="box-detail-content-item">
				<view class="row-title">序号</view>
				<view class="row-content">{{index+1}}</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">服务类别</view>
				<input class="uni-input form-input " v-model="item.CATEGORY_value" name="input" placeholder="请选择服务类别" @click="showSinglePicker(index)" disabled/>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">时间</view>
				<uni-datetime-picker class="form-picker" type="date" :value="item.SERVICE_DATE" start="2000-2-31" end="3050-12-30" @change="dateChange4($event,index)"></uni-datetime-picker>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">服务需求</view>
				<textarea class="uni-input form-input " v-model="item.REQUIRE" name="input" placeholder="请填写服务需求"/>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">完成时间</view>
				<uni-datetime-picker class="form-picker" type="date" :value="item.FINISH_DATE" start="2000-2-31" end="3050-12-30" @change="dateChange5($event,index)"></uni-datetime-picker>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">完成内容</view>
				<textarea class="uni-input form-input " v-model="item.CONTENT" name="input" placeholder="请填写完成内容"/>
			</view>
			<view class="delete-item" @click="deleteItem4(index)"></view>
		</view>
		<view class="add-box-detail-content border-wid" @click="addItem4"></view>
		<!-- 服务end -->
		<view class="item-line">
			<view class="item-top-text">优惠政策落实</view>
		</view>
		<!-- 优惠政策落实start -->
		<view class="box-detail-content" v-if="!showList5.length">
			<view class="box-detail-content-item">
				<view class="row-title">序号</view>
				<view class="row-content">1</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">政策目录</view>
				<view class="row-content">无</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">日期</view>
				<view class="row-content">无</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">金额（万元）</view>
				<view class="row-content">无</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">备注</view>
				<view class="row-content">无</view>
			</view>
		</view>
		<view class="box-detail-content" v-for="item,index in showList5" v-if='item.leixing!==3' :key="index">
			<view class="box-detail-content-item">
				<view class="row-title">序号</view>
				<view class="row-content">{{index+1}}</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">政策目录</view>
				<input class="uni-input form-input " v-model="item.CATEGORY_value" name="input" placeholder="请选择政策目录" @click="showSinglePicker1(index)" disabled/>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">时间</view>
				<uni-datetime-picker class="form-picker" type="date" :value="item.POLICY_DATE" start="2000-2-31" end="3050-12-30" @change="dateChange6($event,index)"></uni-datetime-picker>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">金额</view>
				<input class="uni-input form-input " v-model="item.MONEY" name="input" placeholder="请填写金额"/>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">备注</view>
				<textarea class="uni-input form-input " v-model="item.REMARK" name="input" placeholder="请填写备注"/>
			</view>
			<view class="delete-item" @click="deleteItem5(index)"></view>
		</view>
		<view class="add-box-detail-content border-wid" @click="addItem5"></view>
		<!-- 优惠政策落实end -->
		
		
		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker1" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		@onConfirm="onConfirm1" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker2" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		@onConfirm="onConfirm2" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
	</view>
</template>

<script>
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	export default {
		components: {
		    mpvuePicker
		},
		data(){
			return{
				mode: '',
				deepLength: 1,
				pickerValueDefault: [3],
				pickerValueArray:[],
				activeIndex:0,
				code:'',
				projectId:'',
				showList1:[],
				showList2:[],
				showList3:[],
				showList4:[],
				showList5:[],
				deleteList1:[],
				deleteList2:[],
				deleteList3:[],
				deleteList4:[],
				deleteList5:[],
				sendData:{},
				date:'',
			}
		},
		props: {
			pageData: {
				type: Object,
				default(){
					return {}
				}
			},
			changeListData:{
				type: Object,
				default(){
					return {}
				}
			}
		},
		watch:{
			pageData(){
				// <!-- 销售情况 -->
				if(this.pageData.dataGrid['Sale_view']&&this.pageData.dataGrid['Sale_view'].datas.length>0){	
					this.sendData.listData1=[]
					this.showList1=[]
					this.pageData.dataGrid.Sale_view.datas.map(item=>{
						this.projectId=item.PROJ_ID
						this.sendData.listData1.push({
							datakey:item.DATAKEY,
							proid:item.PROJ_ID,
							MONTH:item.MONTH,//主体名称
							MONTH_SALE:item.MONTH_SALE,//当月销售收入
							// TOTAL_SALE:item.TOTAL_SALE,//累积销售收入
							leixing:0,//操作类型
						})
						this.showList1=this.sendData.listData1
					})
				}else{
					this.sendData.listData1=[]
					this.showList1=this.sendData.listData1
				}
				// <!-- 营业收入 -->
				if(this.pageData.dataGrid['Income_view']&&this.pageData.dataGrid['Income_view'].datas.length>0){
					this.sendData.listData2=[]
					this.showList2=[]
					this.pageData.dataGrid.Income_view.datas.map(item=>{
						this.projectId=item.PROJ_ID
						this.sendData.listData2.push({
							datakey:item.DATAKEY,
							proid:item.PROJ_ID,
							MONTH:item.MONTH,//主体名称
							MONTH_INCOME:item.MONTH_INCOME,//当月销售收入
							// TOTAL_INCOME:item.TOTAL_INCOME,//累积销售收入
							leixing:0,//操作类型
						})
						this.showList2=this.sendData.listData2
					})
				}else{
					this.sendData.listData2=[]
					this.showList2=this.sendData.listData2
				}
				// <!-- 税收收入 -->
				if(this.pageData.dataGrid['busTax_view']&&this.pageData.dataGrid['busTax_view'].datas.length>0){
					this.sendData.listData3=[]
					this.showList3=[]
					this.pageData.dataGrid.busTax_view.datas.map(item=>{
						this.projectId=item.PROJ_ID
						this.sendData.listData3.push({
							datakey:item.DATAKEY,
							proid:item.PROJ_ID,
							MONTH:item.MONTH,//主体名称
							MONTH_INCOME:item.MONTH_INCOME,//当月销售收入
							// TOTAL_INCOME:item.TOTAL_INCOME,//累积销售收入
							leixing:0,//操作类型
						})
						this.showList3=this.sendData.listData3
					})
				}else{
					this.sendData.listData3=[]
					this.showList3=this.sendData.listData3
				}
				// <!-- 服务 -->
				if(this.pageData.dataGrid['Service_view']&&this.pageData.dataGrid['Service_view'].datas.length>0){
					this.sendData.listData4=[]
					this.showList4=[]
					this.pageData.dataGrid.Service_view.datas.map(item=>{
						this.projectId=item.PROJ_ID
						this.sendData.listData4.push({
							datakey: item.DATAKEY,
							proid:item.PROJ_ID,
							CATEGORY: item.CATEGORY,
							CONTENT: item.CONTENT,
							FINISH_DATE: item.FINISH_DATE,
							REQUIRE:  item.REQUIRE,
							SERVICE_DATE: item.SERVICE_DATE,
							leixing: 0,//操作类型
						})
						if(this.sendData.listData4.length){
							this.sendData.listData4.map(item=>{
								if(this.changeListData.DiscountTypeList){
									this.changeListData.DiscountTypeList.map(ites=>{
										if(item.CATEGORY===ites.CODE){
											item.CATEGORY_value=ites.CODE_NAME
										}
									})
								}
							})
						}
						this.showList4=this.sendData.listData4
					})
				}else{
					this.sendData.listData4=[]
					this.showList4=this.sendData.listData4
				}
				// <!-- 优惠政策落实 -->
				if(this.pageData.dataGrid['Policy_view']&&this.pageData.dataGrid['Policy_view'].datas.length>0){
					this.sendData.listData5=[]
					this.showList5=[]
					this.pageData.dataGrid.Policy_view.datas.map(item=>{
						this.projectId=item.PROJ_ID
						this.sendData.listData5.push({
							datakey: item.DATAKEY,
							proid:item.PROJ_ID,
							CATEGORY: item.CATEGORY,
							MONEY: item.MONEY,
							POLICY_DATE: item.POLICY_DATE,
							REMARK:  item.REMARK,
							leixing: 0,//操作类型
						})
						if(this.sendData.listData5.length){
							this.sendData.listData5.map(item=>{
								if(this.changeListData.serviceTypeList){
									this.changeListData.serviceTypeList.map(ites=>{
										if(item.CATEGORY===ites.CODE){
											item.CATEGORY_value=ites.CODE_NAME
										}
									})
								}
							})
						}
						this.showList5=this.sendData.listData5
					})
				}else{
					this.sendData.listData5=[]
					this.showList5=this.sendData.listData5
				}
			}
		},
		methods:{
			onCancel(e) {
			    console.log(e)
			},
			onConfirm1(e) {
				if(this.showList4.length){
					this.showList4[this.activeIndex].CATEGORY_value=e.label
					this.showList4[this.activeIndex].CATEGORY=e.value[0]
				}
			},
			onConfirm2(e) {
				if(this.showList5.length){
					this.showList5[this.activeIndex].CATEGORY_value=e.label
					this.showList5[this.activeIndex].CATEGORY=e.value[0]
				}
			},
			showSinglePicker(index) {
				this.activeIndex=index
				let dataArry=[]
				this.pickerValueArray=[]
				if(this.changeListData.DiscountTypeList.length>0){
					dataArry=this.changeListData.DiscountTypeList
					 this.$refs.mpvuePicker1.show()
				}
				dataArry.map(item=>{
					this.pickerValueArray.push(
						{
							label: item.CODE_NAME,
							value: item.CODE
						}
					)
				})
				this.mode = 'selector'
				this.deepLength = 1
				this.pickerValueDefault = [0]
				
			},
			showSinglePicker1(index) {
				this.activeIndex=index
				let dataArry=[]
				this.pickerValueArray=[]
				if(this.changeListData.serviceTypeList.length>0){
					dataArry=this.changeListData.serviceTypeList
					 this.$refs.mpvuePicker2.show()
				}
				dataArry.map(item=>{
					this.pickerValueArray.push(
						{
							label: item.CODE_NAME,
							value: item.CODE
						}
					)
				})
				this.mode = 'selector'
				this.deepLength = 1
				this.pickerValueDefault = [0]
				
			},
			dateChange1(e,index) {
				this.date = e
				this.showList1[index].MONTH=e 
			},
			dateChange2(e,index) {
				this.date = e
				this.showList2[index].MONTH=e 
			},
			dateChange3(e,index) {
				this.date = e
				this.showList3[index].MONTH=e 
			},
			dateChange4(e,index) {
				this.date = e
				this.showList4[index].SERVICE_DATE=e 
			},
			dateChange5(e,index) {
				this.date = e
				this.showList4[index].FINISH_DATE=e 
			},
			dateChange6(e,index) {
				this.date = e
				this.showList5[index].POLICY_DATE=e 
			},
			addItem1(){
				this.showList1.push({
					datakey: this.getUUID(),
					proid:this.projectId,
					MONTH:'',//主体名称
					MONTH_SALE:'',//当月销售收入
					// TOTAL_SALE:'',//累积销售收入
					leixing:1, //操作类型  新增行标记为1，删除行标记为3，修改行不处理保留原值0
				})
			},
			addItem2(){
				this.showList2.push({
					datakey: this.getUUID(),
					proid:this.projectId,
					MONTH:'',//月份
					MONTH_INCOME:'',//当月销售收入
					// TOTAL_INCOME:'',//累积销售收入
					leixing:1, //操作类型  新增行标记为1，删除行标记为3，修改行不处理保留原值0
				})
			},
			addItem3(){
				this.showList3.push({
					datakey: this.getUUID(),
					proid:this.projectId,
					MONTH:'',//月份
					MONTH_INCOME:'',//当月销售收入
					// TOTAL_INCOME:'',//累积销售收入
					leixing:1, //操作类型  新增行标记为1，删除行标记为3，修改行不处理保留原值0
				})
			},
			addItem4(){
				this.showList4.push({
					datakey: this.getUUID(),
					proid:this.projectId,
					CATEGORY: '',
					CATEGORY_value: '',
					CONTENT: '',
					FINISH_DATE: '',
					REQUIRE: '',
					SERVICE_DATE: '',
					leixing:1, //操作类型  新增行标记为1，删除行标记为3，修改行不处理保留原值0
				})
			},
			addItem5(){
				this.showList5.push({
					datakey: this.getUUID(),
					proid:this.projectId,
					CATEGORY: '',
					CATEGORY_value: '',
					MONEY: '',
					POLICY_DATE: '',
					REMARK: '',
					leixing:1, //操作类型  新增行标记为1，删除行标记为3，修改行不处理保留原值0
				})
			},
			deleteItem1(index){
				if(index===0&&this.showList1.length===1){
					this.showList1=[]
				}else{
					if(this.showList1[index].leixing===0){
						this.deleteList1.push({
							datakey: this.showList1[index].datakey,
							proid:this.showList1[index].proid,
							MONTH:this.showLis1[index].MONTH,//主体名称
							MONTH_SALE:this.showList1[index].MONTH_SALE,//当月销售收入
							// TOTAL_SALE:this.showList1[index].TOTAL_SALE,//累积销售收入
							leixing:3, //操作类型  新增
						})
						this.showList1.splice(index,1)
					}else if(this.showList1[index].leixing===1){
						this.showList1.splice(index,1)
					}
				}	
			},
			deleteItem2(index){
				if(index===0&&this.showList2.length===1){
					this.showList2=[]
				}else{
					if(this.showList2[index].leixing===0){
						this.deleteList2.push({
							datakey: this.showList2[index].datakey,
							proid:this.showList2[index].proid,
							MONTH:this.showList2[index].MONTH,//主体名称
							MONTH_INCOME:this.showList2[index].MONTH_INCOME,//当月销售收入
							// TOTAL_INCOME:this.showList2[index].TOTAL_INCOME,//累积销售收入
							leixing:3, //操作类型  新增
						})
						this.showList2.splice(index,1)
					}else if(this.showList2[index].leixing===1){
						this.showList2.splice(index,1)
					}
				}	
			},
			deleteItem3(index){
				if(index===0&&this.showList3.length===1){
					this.showList3=[]
				}else{
					if(this.showList3[index].leixing===0){
						this.deleteList3.push({
							datakey: this.showList3[index].datakey,
							proid:this.showList3[index].proid,
							MONTH:this.showList3[index].MONTH,//主体名称
							MONTH_INCOME:this.showList3[index].MONTH_INCOME,//当月销售收入
							// TOTAL_INCOME:this.showList3[index].TOTAL_INCOME,//累积销售收入
							leixing:3, //操作类型  新增
						})
						this.showList3.splice(index,1)
					}else if(this.showList3[index].leixing===1){
						this.showList3.splice(index,1)
					}
				}	
			},
			deleteItem4(index){
				if(index===0&&this.showList4.length===1){
					this.showList4=[]
				}else{
					if(this.showList4[index].leixing===0){
						this.deleteList4.push({
							datakey: this.showList4[index].datakey,
							proid:this.showList4[index].proid,
							CATEGORY: this.showList4[index].CATEGORY,
							CATEGORY_value: this.showList4[index].CATEGORY_value,
							CONTENT:this.showList4[index].CONTENT,
							FINISH_DATE:this.showList4[index].FINISH_DATE,
							REQUIRE:this.showList4[index].REQUIRE,
							SERVICE_DATE: this.showList4[index].SERVICE_DATE,
							leixing:3, //操作类型  新增
						})
						this.showList4.splice(index,1)
					}else if(this.showList4[index].leixing===1){
						this.showList4.splice(index,1)
					}
				}	
			},
			deleteItem5(index){
				if(index===0&&this.showList4.length===1){
					this.showList5=[]
				}else{
					if(this.showList5[index].leixing===0){
						this.deleteList5.push({
							datakey: this.showList5[index].datakey,
							proid:this.showList5[index].proid,
							CATEGORY: this.showList5[index].CATEGORY,
							CATEGORY_value: this.showList5[index].CATEGORY_value,
							MONEY: this.showList5[index].MONEY,
							POLICY_DATE: this.showList5[index].POLICY_DATE,
							REMARK:this.showList5[index].REMARK,
							leixing:3, //操作类型  新增
						})
						this.showList5.splice(index,1)
					}else if(this.showList5[index].leixing===1){
						this.showList5.splice(index,1)
					}
				}	
			},
			getUUID() {
			   var s = [];
			   var hexDigits = "0123456789abcdef";
			   for (var i = 0; i < 36; i++) {
			    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
			   }
			   s[14] = "4"; 
			   s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); 
			   s[8] = s[13] = s[18] = s[23] = "";
			
			   var uuid = s.join("");
			   return uuid;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		padding-bottom: 60rpx;
	}
	page{
		padding-bottom: 20rpx;
	}
	.box-detail {
		min-height: 760rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: 20rpx;
		padding: 26rpx 30rpx 50rpx 30rpx;
	}
	.item-line{
		// width: 650rpx;
		height: 40rpx;
		// margin: 20rpx 20rpx 18rpx 20rpx;
		background-color: #0099cc;
		border-radius: 10rpx;
		.item-top-text{
			font-family: AlibabaPuHuiTi-Regular;
			padding-left: 20rpx;
			font-size: 26rpx;
			font-weight: normal;
			line-height: 40rpx;
			letter-spacing: 0px;
			color: #ffffff;
		}
	}
	.item-index-top{
		padding: 0 10rpx;
		// width: 650rpx;
		// height: 40rpx;
		// margin: 20rpx 20rpx 18rpx 20rpx;
		// background-color: #0099cc;
		// border-radius: 10rpx;
		.item-top-text{
			font-family: AlibabaPuHuiTi-Regular;
			padding-left: 20rpx;
			font-size: 24rpx;
			font-weight: normal;
			line-height: 40rpx;
			letter-spacing: 0px;
			color: #ffffff;
		}
	}
	.item-top{
		display: flex;
		justify-content: space-between;
		.setion-left{
			display: flex;
			flex-direction: column;
			.left-text-top{
				font-size: 30rpx;
				font-weight: 600;
				color: #414a5d;
			}
			.left-text-bot{
				margin-top: 22rpx;
				font-size: 26rpx;
				color: #7f7f7f;
			}
		}
		.setion-right{
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			.right-text-top{
				height: 30rpx;
				line-height: 30rpx;
				font-size: 26rpx;
				font-weight: normal;
				color: #9a9a9a;
			}
			.right-text-bot{
				margin-top: 22rpx;
				font-size: 28rpx;
				font-weight: normal;
				color: #999999;
			}
		}
	}
	.box-detail-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 8rpx;
	
		.name {
			font-size: 30rpx;
			color: #414a5d;
			font-weight: bold;
		}
	
		.date {
			font-size: 26rpx;
			color: #9a9a9a;
		}
	}
	
	.box-net {
		font-size: 26rpx;
		color: #0099cc;
	}
	
	.box-detail-content {
		margin-top: 24rpx;
		padding: 0 10rpx;
		border-bottom: 8rpx solid #e8f0f2;
		
	}
	// .border {
	// 	;
	// }
	.border-wid{
		// border-bottom: 4px solid #0099cc;
	}
	.border-none{
		border-bottom:0;
	}
	.box-detail-content-item {
		display: flex;
		flex-direction: row;
		// justify-content: flex-start;
		// justify-content: space-between;
		margin-bottom: 20rpx;
	
		.row-title {
			width: 170rpx;
			font-size: 26rpx;
			color: #9a9a9a;
			text-align: left;
			flex-shrink: 0;
			margin-right: 10rpx;
	
			&.mag {
				margin-left: 18rpx;
			}
		}
	
		.row-content {
			font-size: 26rpx;
			color: #414a5d;
			word-wrap: break-word;
			word-break: break-all;
			flex: 1;
			text-align: left;
	
			&.mag {
				margin-right: 18rpx;
			}
		}
		
		.content-style{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			image{
				width: 27rpx;
				height: 27rpx;
			}
			.history-name{
				margin-left: 10rpx;
				font-family: AlibabaPuHuiTi-Regular;
				font-size: 24rpx;
				color: #0099cc;
			}
		}
	}
	
	.bar-contact {
		background-color: #0099cc;
		border-radius: 10px;
		height: 40rpx;
		line-height: 40rpx;
		padding-left: 18rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		
	}
	.box-attach{
		margin-top: 20rpx;
		padding: 0 10rpx;
	}
	.box-attach-row {
		display: flex;
		align-items: center;
		padding: 0 18rpx;
		height: 38rpx;
		margin-bottom: 10rpx;
		.box-attach-icon {
			width: 34rpx;
			margin-right: 30rpx;
		}
		.box-attach-name {
			font-size: 26rpx;
			color: #0099cc;
		}
	}
	.fixed-action-bar{
		width: 100%;
		display: flex;
		height: 70rpx;
		align-items: center;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		.item{
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			
		}
		.icon{
			width: 30rpx;
		}
		.btn-box{
			width: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 70rpx;
		}
		.text-edit{
			font-size: 24rpx;
			color: #0099cc;
			line-height: 70rpx;
		}
		.text-delete{
			font-size: 24rpx;
			color: #cc3357;
			line-height: 70rpx;
		}
	}
	
	.box-detail {
		min-height: 760rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: 20rpx;
		padding: 26rpx 30rpx 50rpx 30rpx;
	}
	.item-index-top{
		// width: 650rpx;
		height: 40rpx;
		// margin: 20rpx 20rpx 18rpx 20rpx;
		background-color: #0099cc;
		border-radius: 10rpx;
		.item-top-text{
			font-family: AlibabaPuHuiTi-Regular;
			padding-left: 20rpx;
			font-size: 26rpx;
			font-weight: normal;
			line-height: 40rpx;
			letter-spacing: 0px;
			color: #ffffff;
		}
	}
	.item-top{
		display: flex;
		justify-content: space-between;
		.setion-left{
			display: flex;
			flex-direction: column;
			.left-text-top{
				font-size: 30rpx;
				font-weight: 600;
				color: #414a5d;
			}
			.left-text-bot{
				margin-top: 22rpx;
				font-size: 26rpx;
				color: #7f7f7f;
			}
		}
		.setion-right{
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			.right-text-top{
				height: 30rpx;
				line-height: 30rpx;
				font-size: 26rpx;
				font-weight: normal;
				color: #9a9a9a;
			}
			.right-text-bot{
				margin-top: 22rpx;
				font-size: 28rpx;
				font-weight: normal;
				color: #999999;
			}
		}
	}
	.box-detail-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 8rpx;
	
		.name {
			font-size: 30rpx;
			color: #414a5d;
			font-weight: bold;
		}
	
		.date {
			font-size: 26rpx;
			color: #9a9a9a;
		}
	}
	
	.box-net {
		font-size: 26rpx;
		color: #0099cc;
	}
	
	.box-detail-content {
		margin-top: 24rpx;
		padding: 0 10rpx;
		border-bottom: 8rpx solid #e8f0f2;
		position: relative;
	}
	.delete-item{
		width:54rpx;
		height: 54rpx;
		background: url(../../../../static/images/icon_del.png);
		background-size:36rpx 36rpx ;
		background-repeat: no-repeat;
		background-position:18rpx 0; 
		position: absolute;
		z-index: 100;
		top: 0;
		right: 0;
	}
	.add-box-detail-content{
		height: 120rpx;
		background-image: url(../../../../static/images/add.png);
		background-repeat: no-repeat;
		background-position: 50% 24%;
		background-size: 160rpx 46rpx;
		
	}
	// .border {
	// 	;
	// }

	.box-detail-content-item {
		display: flex;
		flex-direction: row;
		// align-items: center;
		// justify-content: flex-start;
		// justify-content: space-between;
		margin-bottom: 20rpx;
	
		.row-title {
			width: 170rpx;
			font-size: 26rpx;
			color: #414a5d;
			text-align: left;
			flex-shrink: 0;
			margin-right: 10rpx;
	
			&.mag {
				margin-left: 18rpx;
			}
		}
	
		.row-content {
			font-size: 26rpx;
			color: #414a5d;
			word-wrap: break-word;
			word-break: break-all;
			flex: 1;
			text-align: left;
	
			&.mag {
				margin-right: 18rpx;
			}
		}
	}
	
	.bar-contact {
		background-color: #0099cc;
		border-radius: 10px;
		height: 40rpx;
		line-height: 40rpx;
		padding-left: 18rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		
	}
	.box-attach{
		margin-top: 20rpx;
		padding: 0 10rpx;
	}
	.box-attach-row {
		display: flex;
		align-items: center;
		padding: 0 18rpx;
		height: 38rpx;
		margin-bottom: 10rpx;
		.box-attach-icon {
			width: 34rpx;
			margin-right: 30rpx;
		}
		.box-attach-name {
			font-size: 26rpx;
			color: #0099cc;
		}
	}
	.fixed-action-bar{
		width: 100%;
		display: flex;
		height: 70rpx;
		align-items: center;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		.item{
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			
		}
		.icon{
			width: 30rpx;
		}
		.btn-box{
			width: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 70rpx;
		}
		.text-edit{
			font-size: 24rpx;
			color: #0099cc;
			line-height: 70rpx;
		}
		.text-delete{
			font-size: 24rpx;
			color: #cc3357;
			line-height: 70rpx;
		}
	}
	
	.uni-input{
		font-size: 26rpx;
		color: #808080;
		// border-bottom:1px solid #dce4e6;
		flex:1;
	}
	.textarea-style{
		height:156rpx ;
	}
</style>
